<template>
  <div class="header-actions">
    <!-- 全屏按钮 -->
    <el-tooltip content="全屏" placement="bottom">
      <el-button :icon="isFullscreen ? FullScreen : FullScreen" circle @click="toggleFullscreen" />
    </el-tooltip>

    <!-- 主题切换 -->
    <el-tooltip :content="isDark ? '切换到浅色模式' : '切换到深色模式'" placement="bottom">
      <el-button :icon="isDark ? Sunny : Moon" circle @click="toggleTheme" />
    </el-tooltip>

    <!-- 消息通知 -->
    <el-tooltip content="消息通知" placement="bottom">
      <el-badge :value="12" :max="99">
        <el-button :icon="Bell" circle />
      </el-badge>
    </el-tooltip>

    <!-- 用户下拉菜单 -->
    <el-dropdown @command="handleCommand">
      <span class="user-dropdown">
        <el-avatar :size="32" :src="userInfo.avatar">
          <el-icon><UserFilled /></el-icon>
        </el-avatar>
        <span class="user-name">{{ userInfo.name }}</span>
        <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="profile">
            <el-icon><User /></el-icon>
            个人中心
          </el-dropdown-item>
          <el-dropdown-item command="settings">
            <el-icon><Setting /></el-icon>
            设置
          </el-dropdown-item>
          <el-dropdown-item command="password">
            <el-icon><Lock /></el-icon>
            修改密码
          </el-dropdown-item>
          <el-dropdown-item divided command="logout">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  FullScreen,
  Sunny,
  Moon,
  Bell,
  UserFilled,
  User,
  Setting,
  Lock,
  SwitchButton,
  ArrowDown
} from '@element-plus/icons-vue'

const router = useRouter()
const appStore = useAppStore()

// 主题状态
const isDark = computed(() => appStore.isDark)

// 全屏状态
const isFullscreen = ref(false)

// 用户信息（示例数据）
const userInfo = ref({
  name: '管理员',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

// 主题切换
const toggleTheme = () => {
  appStore.setTheme(isDark.value ? 'light' : 'dark')
}

// 全屏切换
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      isFullscreen.value = false
    }
  }
}

// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
  isFullscreen.value = !!document.fullscreenElement
})

// 下拉菜单命令处理
const handleCommand = async command => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'settings':
      ElMessage.info('设置功能开发中...')
      break
    case 'password':
      ElMessage.info('修改密码功能开发中...')
      break
    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 这里可以调用退出登录的API
        ElMessage.success('退出成功')
        router.push('/login')
      } catch {
        // 用户取消
      }
      break
  }
}
</script>

<style scoped>
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.user-dropdown:hover {
  background-color: var(--el-color-primary-light-9);
}

.user-name {
  font-size: 14px;
  color: var(--el-text-color-regular);
  white-space: nowrap;
}

.dropdown-icon {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
  transition: transform 0.3s;
}

.user-dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}

/* 响应式处理 */
@media (max-width: 768px) {
  .user-name {
    display: none;
  }
  .header-actions {
    gap: 8px;
  }
}
</style>
